<template>
  <div class="parent">
    <p class="unitp">单位：tCO₂e</p>
    <echartsDom v-if="isShowEcharts" style="margin-top: 20px" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
import { accountingEmissionDatatraceability } from "@/api/doubleCarbonManage/dataAnalysis";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartvalue: {
    type: Object,
    required: true
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
// 5月版本增加别名功能
function getAlias(payload: any[]) {
  const data = payload.map(e => {
    const nameList = e.name.split(",");
    return {
      name: e.name,
      label: {
        formatter: nameList[nameList.length - 1] // 显示的别名
      }
    };
  });
  return data;
}
// worker 处理复杂数据
const processWorker = async (payload: { oLinks: any }): Promise<{ nodes: any; links: any }> => {
  return new Promise(resolve => {
    let worker: Worker | null = null;
    worker = new Worker(new URL("./upwChemistryWorker.ts", import.meta.url), {
      type: "module"
    });
    worker.postMessage(JSON.stringify(payload));
    worker.onmessage = e => {
      resolve(JSON.parse(e.data));
      worker.terminate();
    };
  });
};
const { option } = toRefs(state);
const getoptions = async () => {
  if (props.chartvalue != null) {
    isShowEcharts.value = true;
    // 超10条前9展示后面整合成一条其他
    const { nodes, links } = await processWorker({ oLinks: props.chartvalue.links });
    // const data = nodes;
    // 5月版本增加别名功能
    const data = getAlias(nodes);

    option.value = {
      // toolbox: {
      //   show: true,
      //   feature: {
      //     saveAsImage: {
      //       title: "点击保存为图片",
      //       name: "碳排放溯源"
      //     }
      //   }
      // },
      tooltip: {
        trigger: "item",
        triggerOn: "mousemove",
        confine: true,
        formatter: function (params) {
          return params.name + ":" + params.value.toFixed(2);
        }
      },
      series: {
        type: "sankey",
        // layout: "none",
        levels: [
          {
            depth: 0,
            itemStyle: {
              color: "#fbb4ae"
            },
            lineStyle: {
              color: "source",
              opacity: 0.6
            }
          },
          {
            depth: 1,
            itemStyle: {
              color: "#b3cde3"
            },
            lineStyle: {
              color: "source",
              opacity: 0.6
            }
          },
          {
            depth: 2,
            itemStyle: {
              color: "#ccebc5"
            },
            lineStyle: {
              color: "source",
              opacity: 0.6
            }
          },
          {
            depth: 3,
            itemStyle: {
              color: "#decbe4"
            },
            lineStyle: {
              color: "source",
              opacity: 0.6
            }
          },
          {
            depth: 4,
            itemStyle: {
              color: "#a899aa"
            },
            lineStyle: {
              color: "source",
              opacity: 0.6
            }
          }
        ],
        emphasis: {
          focus: "adjacency"
        },
        layoutIterations: 64,
        labelLayout: {
          moveOverlap: "shiftY"
        },
        nodeAlign: "left",
        roam: true,
        data: data,
        links: links
      }
    };
  } else {
    isShowEcharts.value = false;
  }
};
watch(
  () => props.chartvalue,
  newOption => {
    if (newOption != null) {
      getoptions();
    } else {
      isShowEcharts.value = false;
    }
  }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.unitp {
  position: absolute;
}
</style>
